<template>
	<view class="box">
		<!-- 头部 -->
		<view class="top">修改个人信息</view>
		<!-- 个人信息 -->
		<view class="user-info">
			<view class="list">
				<!-- 头像 -->
				<view class="item">
					<view>头像</view>
					<view class="update-image" @click="updateImg">
						<image :src="user.userImg"></image>
					</view>
				</view>
				<!-- 昵称 -->
				<view class="item">
					<view>昵称</view>
					<view class="input">
						<input type="text" v-model="user.nickName" />
					</view>
				</view>
				<!-- 手机号 -->
				<view class="item">
					<view>手机号</view>
					<view class="input">
						<view class="id">{{ user.phone}}</view>
						<image src="/static/login/mima.png"></image>
					</view>
				</view>
				<!-- ID号 -->
				<view class="item">
					<view>ID号</view>
					<view class="input input-userId">
						<view class="id userId">{{ user.userId }}</view>
						<image src="/static/login/mima.png"></image>
					</view>
				</view>
				<!-- 更改密码 -->
				<view class="item">
					<view>更改密码</view>
					<view class="input">
						<view class="id" @click="goUserPwd">点击修改密码</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
				<!-- 手机号 -->
				<view class="item">
					<view>更换手机号</view>
					<view class="input">
						<view class="id" @click="goUserPhone">点击更换手机号码</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
				<view class="item">
					<view>更换邮箱</view>
					<view class="input">
						<view class="id" @click="goUserEmail">点击更换邮箱</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
				<!-- 地址 -->
				<view class="item">
					<view>地址管理</view>
					<view class="input">
						<view class="id" @click="goAddress">点击前往</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
				<!-- 账号注销 -->
				<view class="item">
					<view>账号注销</view>
					<view class="input">
						<view class="id" @click="userCancel">注销后无法恢复</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
			</view>
			<!-- 保存修改 -->
			<button class="modifyBnt bg-color" @click="setUser">保存修改</button>
			<!-- 退出登录 -->
			<button class="logOut cartcolor" @click="loginOut">退出登录</button>
		</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../../api/api.js";
	// 导入根目录
	import path from "../../../utils/path.js";
	// 导入pinia
	import {
		useUserStore
	} from "../../../store/users.js";
	const userStore = useUserStore();
	export default {
		data() {
			return {
				user: '',
			}
		},
		methods: {
			// 跳转地址管理
			goAddress() {
				uni.navigateTo({
					url: "/pages/user/user_address_list/user_address_list"
				})
			},
			// 跳转修改密码页面
			goUserPwd() {
				uni.navigateTo({
					url: "/pages/user/user_pwd_edit/user_pwd_edit"
				})
			},
			// 跳转更换手机号页面
			goUserPhone() {
				uni.navigateTo({
					url: "/pages/user/user_phone/user_phone"
				})
			},
			// 跳转邮箱绑定
			goUserEmail() {
				uni.navigateTo({
					url: "/pages/user/user_email/user_email"
				})
			},
			// 账号注销
			userCancel() {
				uni.$showMsg("注销功能还处于测试阶段！");
			},
			// 退出登录
			loginOut() {
				// 清空token
				userStore.clearToken();
				// 退出登录
				uni.$showMsg("退出成功！");
				// 1.8秒跳转登录页面
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/user/login/login",
					})
				}, 1800);
			},
			// 修改头像
			updateImg() {
				uni.chooseImage({
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// 上传图片
						uni.uploadFile({
							url: path.baseUrl + "/api/userInfo/file/uploadImg/",
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data);
								console.log(data);
								// 上传失败
								if (data.status != 200) return uni.$showMsg(data.data.err);
								// 上传成功
								this.user.userImg = data.data.imageUrl;
								uni.$showMsg(data.msg);
							}
						})
					}
				})
			},
			// 修改用户基本信息
			setUser() {
				api.setUserInfo({
					userImg: this.user.userImg, // 头像地址
					nickName: this.user.nickName // 用户昵称
				}).then(res => {
					// 修改失败
					if (res.data.status != 200) return uni.$showMsg("修改失败！");
					// 修改成功
					uni.$showMsg(res.data.msg);
					// 修改成功刷新一下
					location.reload();
				});
			}
		},
		onLoad() {
			// 设置用户信息页面title
			uni.setNavigationBarTitle({
				title: "个人资料"
			});
			// 打开自动获取登录信息
			api.getUserInfo().then(res => {
				// 获取失败
				if (res.data.status != 200) {
					// 提示信息
					uni.$showMsg(res.data.data.err);
					// 1.8秒跳转登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login/login",
						})
					}, 1800);
					return;
				}
				// 获取成功
				this.user = res.data.data.user;
				uni.$showMsg(res.data.msg);
			});
		}
	}
</script>

<style>
	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	.list {
		margin-top: 8px;
		background-color: #fff;
	}

	/* 个人信息 */
	.list .item {
		width: 670rpx;
		padding: 16px 16px 16px 0;
		border-bottom: 1px solid #f2f2f2;
		margin-left: 16px;
		font-size: 14px;
		color: #282828;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.list .item .update-image {
		width: 100rpx;
		height: 100rpx;
	}

	.list .item .update-image image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.list .item .input {
		display: flex;
		align-items: center;
		max-width: 213px;
		text-align: right;
		color: #868686;
		font-size: 14px;
	}

	.list .item .input input {
		display: block;
		font-size: 14px;
		line-height: 1.4em;
		height: 1.4em;
		min-height: 1.4em;
		overflow: hidden;
	}

	.list .item .input-userId {
		margin-right: 115rpx;
	}

	.list .item .input input .userId {}

	.list .item .input image {
		width: 30rpx;
		height: 28rpx;
	}

	/* 保存修改 */
	.modifyBnt {
		font-size: 17px;
		color: #fff;
		width: 670rpx;
		height: 48px;
		border-radius: 26px;
		text-align: center;
		line-height: 48px;
		margin: 68rpx auto 0 auto;
	}

	.bg-color {
		background-color: rgba(29, 176, 252, 1) !important;
	}

	/* 退出登录 */
	.logOut {
		font-size: 17px;
		text-align: center;
		width: 670rpx;
		height: 48px;
		border-radius: 24px;
		margin: 16px auto 0 auto;
	}

	.cartcolor {
		color: rgba(29, 176, 252, 1);
		border: 1px solid rgba(29, 176, 252, 1);
	}
</style>